昨天我們成功用 JavaScript 刻出了動態的月曆網格與月份切換功能。今天會進入到資料繫結，讓存在 localStorage 裡的消費紀錄自動找到對應的日期，並渲染到月曆格子裡。這樣使用者切換到月曆頁面時，就能知道自己每一天花錢的軌跡！

一、 核心實作：動態尋找對應日期的 DOM 容器

昨天建立月曆格子時，我們已經為每一天賦予了一個獨一無二的 ID（例如 cell-data-2026-10-01）。
今天我們只需要在渲染完月曆格子後，用 forEach 走訪所有消費紀錄，並利用這組 ID 把資料塞進去：

// 把 expenses 裡的資料對號入座填入對應的日期格子
expenses.forEach(item => {
    const cellContainer = document.getElementById(`cell-data-${item.date}`);
    if (cellContainer) {
        const itemTag = document.createElement('div');
        itemTag.style.backgroundColor = '#e8f0fe';
        itemTag.style.color = '#1967d2';
        itemTag.style.padding = '1px 4px';
        itemTag.style.borderRadius = '3px';
        itemTag.style.fontSize = '10px';
        itemTag.style.whiteSpace = 'nowrap';
        itemTag.textContent = `${item.name} $${item.amount}`;
        
        cellContainer.appendChild(itemTag);
    }
});

二、 確保資料即時同步

為了確保使用者在總覽頁面新增或刪除記帳時，切換到月曆頁面能看到最新的狀態，在資料變動的函式中也同步觸發 renderCalendar()。

// 1. 新增支出按鈕監聽
addBtn.addEventListener('click', function() {
    // ... 略過表單驗證與 push 資料 ...
    expenses.push(newExpense);
    localStorage.setItem('my_expenses', JSON.stringify(expenses));
    
    renderExpenses();
    renderCalendar(); // 確保新增時月曆即時同步更新！
});

// 2. 刪除按鈕事件綁定
deleteButtons.forEach(function(btn) {
    btn.addEventListener('click', function() {
        const index = btn.getAttribute('data-index');
        expenses.splice(index, 1);
        localStorage.setItem('my_expenses', JSON.stringify(expenses));
        
        renderExpenses();
        renderCalendar(); // 確保刪除時月曆即時同步移除！
    });
});

這樣無論是在哪裡新增消費，月曆上的小標籤就會立刻更新。